import {
  Flex,
  Box,
  TabProps,
  useTab,
  useMultiStyleConfig,
  useColorModeValue,
} from '@chakra-ui/react';
import { MouseEvent, memo, useCallback, forwardRef } from 'react';
const CustomTab = forwardRef<HTMLDivElement, TabProps>(function TourflyTab(
  props,
  ref
) {
  const tabProps = useTab({ ...props, ref });
  const isSelected = !!tabProps['aria-selected'];

  const styles = useMultiStyleConfig('Tabs', tabProps);

  const handleClickTab = useCallback((e: MouseEvent<HTMLElement>) => {
    if (e.target instanceof HTMLElement) {
      e.target.blur();
    }
  }, []);

  const bg = useColorModeValue('base.950', 'base.850');

  return (
    <Flex
      align="center"
      gap="2px"
      direction={{ base: 'column-reverse', md: 'row' }}
    >
      <Box
        w={{ base: '40px', md: '2px' }}
        h={{ base: '2px', md: '40px' }}
        borderRadius="full"
        bg={isSelected ? 'accent.600' : 'transparent'}
      ></Box>
      <Flex
        {...tabProps}
        {...styles}
        _focusVisible={{ outline: 'none' }}
        color={isSelected ? 'accent.600' : 'base.700'}
        align="center"
        justify="center"
        w="36px"
        h="36px"
        borderRadius="base"
        _hover={{ bg: bg, color: 'accent.500' }}
        cursor="pointer"
        onClick={handleClickTab}
      >
        {tabProps.children}
      </Flex>
    </Flex>
  );
});

export default memo(CustomTab);
